<template>
  <div class="control-layer" v-if="isControlLayerShow">
    <!-- 图层数据 -->
    <div class="layerBtn">
      <img
        :src="layerBtnImg"
        alt=""
        @click="showLayerPanel = !showLayerPanel"
      />
    </div>
    <div class="layerPanel" v-show="showLayerPanel">
      <el-tree
        :data="layerData"
        show-checkbox
        check-on-node-click
        node-key="label"
        default-expand-all
        :render-content="renderLayerContent"
        style="
          width: 100%;
          color: #ffffff;
          font-family: Source Han Sans CN;
          font-weight: medium;
          background-color: transparent;
        "
        @check="handleCheck"
        ref="layerTree"
      ></el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "layerPanel",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    isControlLayerShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
  },
  methods: {
    handleCheck(checkedNodes, checked) {
      // ;
      // ;
      //加图层操作
      if (checked.checkedKeys.length > 0) {
        // ;
        //判断新增还是取消
        if (checked.checkedKeys.length > this.lastLayerData.length) {
          // ;
          //新增操作
          let addLayerItem = checked.checkedKeys.filter(
            (item) => !this.lastLayerData.includes(item)
          );
          //发送请求，添加图层
          let layerRequest = this.findLeafNode(this.layerData, addLayerItem[0]);
          if (layerRequest) {
            //设置参数,params默认为空,可修改
            // layerRequest.params = {};
            layerRequest.request(layerRequest.params).then((res) => {
              if (res) {
                layerRequest.addlayer(res.data);
              } else {
                this.$message.error("暂无数据");
              }
            });
          }
        } else {
          //取消操作
          let delLayerItem = this.lastLayerData.filter(
            (item) => !checked.checkedKeys.includes(item)
          );
          this.layerMap.map.getAllLayers().forEach((layer) => {
            let name = layer.get("name") || layer.get("layerName");
            if (name == delLayerItem[0]) {
              this.layerMap.map.removeLayer(layer);
            }
          });
        }
      } else {
        //取消操作
        let delLayerItem = this.lastLayerData.filter(
          (item) => !checked.checkedKeys.includes(item)
        );
        this.layerMap.map.getAllLayers().forEach((layer) => {
          let name = layer.get("name") || layer.get("layerName");
          if (name == delLayerItem[0]) {
            this.layerMap.map.removeLayer(layer);
          }
        });
      }
      //记录当前选中的图层
      this.lastLayerData = checked.checkedKeys;
    },
    //找叶子节点
    findLeafNode(data, labelToFind) {
      let result = null;
      for (const item of data) {
        if (item.label == labelToFind) {
          // 检查当前项是否为叶子节点（没有children属性或children为空数组）
          if (!item.children || item.children.length === 0) {
            result = item;
            break;
          }
        }
        // 如果当前项有子节点，则递归地在子节点中查找
        if (item.children && item.children.length > 0) {
          let childResult = this.findLeafNode(item.children, labelToFind);
          if (childResult) {
            result = childResult;
            break;
          }
        }
      }
      return result;
    },
    delLayerBtn(data) {
      console.log(data, "data");
    },
    renderLayerContent(h, { node, data, store }) {
      return (
        <span class="button-layer">
          {node.label}
          <button
          style={{ width: "25px", height: "20px" }}
            on-click={(event) => {
              event.stopPropagation(); // 阻止事件冒泡
              this.delLayerBtn(data); // 处理按钮点击逻辑
            }}
          >
            删除
          </button>
        </span>
      );
      // if (
      //   data.label == "互联网地图" ||
      //   data.label == "水文" ||
      //   data.label == "普查数据" ||
      //   data.label == "地质灾害"
      // ) {
      //   let img = require("@/assets/layershow/layerBtnActive.png");
      //   return (
      //     <span class="button-layer">
      //       <img src={img} alt="" style={{ width: "25px", height: "20px" }} />
      //       {node.label}
      //     </span>
      //   );
      // } else {
      //   return <span class="button-layer">{node.label}</span>;
      // }
    },
  },
  watch: {
    showLayerPanel(newVal) {
      if (newVal) {
        this.layerBtnImg = require("@/assets/layershow/layerBtnActive.png");
      } else {
        this.layerBtnImg = require("@/assets/layershow/layerBtnGrey.png");
      }
    },
  },
  mounted() {
    this.layerMap = this.$store.getters.Map;
  },
  data() {
    return {
      layerMap: null,
      lastLayerData: [],
      layerBtnImg: require("@/assets/layershow/layerBtnGrey.png"),
      showLayerPanel: false,
      layerData: [
        {
          label: "互联网地图",
          children: [
            {
              label: "百度地图",
              children: [
                {
                  label: "气象站点分布图",
                },
                { label: "降水等值图" },
                { label: "温度" },
                { label: "风速" },
              ],
            },
            { label: "谷歌地图" },
            {
              label: "天地图",
            },
          ],
        },
        {
          label: "水文",
          children: [
            {
              label: "水库",
            },
            { label: "水文站" },
          ],
        },
        {
          label: "普查数据",
          children: [
            {
              label: "高温",
              children: [],
            },
            { label: "大风" },
            { label: "暴雨" },
            { label: "暴雪" },
            { label: "冰雹" },
          ],
        },
        {
          label: "地质灾害",
          children: [
            {
              label: "中小河流隐患点",
            },
            { label: "承灾体" },
            {
              label: "山洪沟隐患点",
            },
            { label: "中小河流流域边界" },
            {
              label: "地质灾害隐患点",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.control-layer {
  width: 3vw;
  color: white;
  position: absolute;
  top: 13vh;
  right: -4vw;
  height: 6vh;
  z-index: 2;
  background-color: #285383;
}
.layerBtn {
  position: absolute;
  left: 10px;
  top: 0.5rem;

  img {
    width: 40px;
    height: 40px;
  }
}
.layerPanel {
  position: absolute;
  left: 60px;
  top: 2rem;
  width: 300px;
  height: 700px;
  border: 1px solid #000;
  background-color: rgba(35, 69, 100, 0.7);
  ::v-deep .el-tree-node__content:hover {
    background-color: rgba(1, 79, 115, 0.4);
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }
  ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  ::v-deep .el-tree-node__content > label.el-checkbox {
    margin: 0px 5px;
  }
}
</style>
